<template>
	<view class="p-10">
		<view class="p-10" style="background-color: #fff;">
			<view class="flex">
				<u-avatar size="60" src="/static/img/avatar.png" shape="square"></u-avatar>
				<view class="flex-col m-center m-l-10">
					<view class="">
						<text class="m-r-10 fw" style="font-size: 32rpx;"> 梁佳伦</text>
						<u-tag text="内部" size="mini" bgColor="#4481E5" shape="circle"></u-tag>
					</view>
					<view class="m-t-5 flex"> <u-icon name="map"></u-icon><text style="color: #555D6F; font-size: 24rpx;">西采场(机电部)</text> </view>
				</view>
			</view>
		</view>
		<view class="m-t-10">
			<uni-section type="line" title="人员信息"></uni-section>
			<view class="bg-white">
				<u-cell-group>
					<u-cell title="电话" :border="false">
						<template #value>
							<text style="color: #2472F1" @click="callPhone('1855632495')">1855632495</text>
						</template>
					</u-cell>
					<u-cell title="安全培训" :border="false">
						<template #value>
							<text :style="{color: '#00B578'}">已培训</text>
						</template>
					</u-cell>
					<u-cell title="酒精监测">
						<template #value>
							<text :style="{color: '#00B578'}">正常</text>
						</template>
					</u-cell>
				</u-cell-group>
			</view>
		</view>
		<view class="m-t-10">
			<uni-section type="line" title="定位设备"></uni-section>
			<view class="bg-white">
				<u-cell-group>
					<u-cell title="设备名称" :border="false" value="搜索设备"></u-cell>
					<u-cell title="编号" value="89465" :border="false"></u-cell>
					<u-cell title="剩余电量" value="30%" :border="false"></u-cell>
					<u-cell title="状态">
						<template #value>
							<text :style="{color: '#00B578'}">在线</text>
						</template>
					</u-cell>
				</u-cell-group>
			</view>
		</view>
	</view>
</template>

<script setup>
	const callPhone = (phoneNum) => {
		uni.makePhoneCall({
			phoneNumber: phoneNum,
			success(res) {
				console.log('拨打成功');
			},
			fail(err) {
				console.log('拨打失败');
			}
		});
	}
</script>

<style lang="scss" scoped>
	:deep(.uni-section-header) {
		.uni-section-header__decoration.line {
			background-color: #0052D9;
			height: 16px;
		}

		.uni-section__content-title {
			font-weight: bold;
		}
	}
</style>